<script lang="ts" setup>
import * as echarts from 'echarts'

import { onMounted, ref } from 'vue'
// 图表实例（对应原 data 中的 chart）
let lineChartObj = ref(null)
const lineOptions = ref({
  title: {
    text: '日流量统计',
    textStyle: { fontSize: 15 },
  },
  xAxis: {
    data: [
      '00:00',
      '01:00',
      '02:00',
      '03:00',
      '04:00',
      '05:00',
      '06:00',
      '07:00',
      '08:00',
      '09:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00',
    ],
    axisTick: { show: true },
    axisLine: {
      lineStyle: {
        width: '700px',
      },
    },
  },
  grid: {
    left: 10,
    right: 10,
    bottom: 20,
    top: 45,
    containLabel: true,
    show: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' },
    padding: [5, 10],
  },
  yAxis: {
    type: 'value',
    name: '',
    axisTick: { show: false },
    axisLine: {
      lineStyle: {
        width: '500px',
      },
    },
  },
  legend: {
    data: ['今日', '昨日'],
  },
  series: [
    {
      name: '今日',
      type: 'line',
      data: [120, 132, 101, 182, 1111, 234, 210],
      areaStyle: {
        color: 'rgb(54,96,254)', // 填充颜色（带透明度）
      },
    },
    {
      name: '昨日',
      type: 'line',
      data: [900, 182, 541, 234, 0, 130, 310, 101],
    },
  ],
})

onMounted(() => {
  // 基于准备好的dom (这里是div chart容器)，初始化echarts实例
  const lineChart = echarts.init(lineChartObj.value)

  // 使用刚指定的配置项和数据显示图表。
  lineChart.setOption(lineOptions.value)
  // 图表根据窗口大小 自适应 完整显示
  window.addEventListener('resize', () => {
    lineChart.resize()
  })
})
</script>

<template>
  <div ref="lineChartObj" style="width: 700px; height: 500px"></div>
</template>

<style scoped></style>
